<script setup>
import request from '@/utils/request.js'
import { ref } from 'vue'

const keyword = ref('')
const loading = ref(false)
const editorContent = ref('<p>欢迎使用富文本编辑器</p>')

const ping = async () => {
  loading.value = true
  try {
    await request.get('/ping')
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <div class="container">
    <h2>电影项目 · 依赖与富文本集成完成</h2>
    <div style="margin: 16px 0; display: flex; gap: 12px; align-items: center;">
      <el-input v-model="keyword" placeholder="试试 Element Plus 输入框" style="max-width: 320px;" />
      <el-button type="primary" :loading="loading" @click="ping">
        <el-icon style="margin-right: 6px">
          <Search />
        </el-icon>
        测试网络请求
      </el-button>
    </div>

    <el-card header="富文本编辑器示例" style="margin-top: 12px;">
      <QuillEditor v-model:content="editorContent" contentType="html" theme="snow" style="height: 200px" />
      <div style="margin-top: 12px;">
        <el-alert title="编辑器当前内容（HTML）" type="info" :closable="false" />
        <el-scrollbar height="150px" style="margin-top: 8px;">
          <div v-html="editorContent" />
        </el-scrollbar>
      </div>
    </el-card>

    <el-button type="success" style="margin-top: 12px;">
      <el-icon style="margin-right: 6px">
        <Check />
      </el-icon>
      UI 已就绪
    </el-button>
  </div>
</template>

<style scoped>
h2 {
  margin: 0 0 12px;
  font-weight: 600;
}
</style>